import React from 'react';
import { Space, Statistic, Button } from 'antd';
import {
  ModalForm,
} from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
import styles from '../index.less';
import { useModel } from '@@/plugin-model/useModel';
import { utils } from 'ethers';

const SaleCard: React.FC = () => {

  // 全局变量
  const { initialState } = useModel('@@initialState');
  if(!initialState){
    return <div/>
  }
  // 页面变量
  const {item,owner,tokenId,sale,loading,responsive} = useModel('item');
  const { currentAccount,provider,contracts:{saleContract} } = initialState;
  if(!item){
    return <div/>
  }

  // 判断token所有者是否定价交易合约 当所有者为合约地址时 表示token正在进行定价交易
  if (owner !== saleContract.address || !sale) {
    return <div/>;
  }

  const buyForm = (
    <ModalForm
      title="购买"
      trigger={
        <Button type="primary" size="large">
          购买
        </Button>
      }
      onFinish={async () => {
        try {
          const signer = await provider.getSigner();
          const overrides = {
            from: await signer.getAddress(),
            gasPrice: await provider.getGasPrice(),
            gasLimit: 500000,
            nonce: await signer.getTransactionCount(),
            value: utils.parseEther(sale.price.toString()),
          };
          await saleContract.callStatic.confirm(
            tokenId,
            overrides,
          );
          const tx = await saleContract
            .connect(signer)
            .confirm(tokenId, overrides);
          await tx.wait();
          window.location.reload();
          return true;
        } catch (e) {
          console.error(e);
        }
      }}
    >
    </ModalForm>
  );

  const deleteForm = (
    <ModalForm
      title="取消"
      trigger={<Button size="large">取消</Button>}
      onFinish={async (values) => {
        try {
          const signer = await provider.getSigner();
          const overrides = {
            from: await signer.getAddress(),
            gasPrice: await provider.getGasPrice(),
            gasLimit: 500000,
            nonce: await signer.getTransactionCount(),
          };
          await saleContract.callStatic.cancel(tokenId, overrides);
          const tx = await saleContract
            .connect(signer)
            .cancel(tokenId, overrides);
          await tx.wait();
          window.location.reload();
        } catch (e) {
          console.error(e);
        }
        return true;
      }}
    />
  );

  // 判断当前用户是否为作品的拥有者 显示不同的操作按钮
  const sellerActions = sale.seller === currentAccount?.address && (
    <Space>
      {deleteForm}
    </Space>
  );
  const buyerActions =
    sale.seller === currentAccount?.address ? [] : [buyForm];

  return (
    <ProCard.Group
      className={styles.itemCard}
      title="进行中的交易"
      headerBordered
      bordered
      extra={sellerActions}
      actions={buyerActions}
      direction={responsive ? 'column' : 'row'}
      loading={loading}
    >
      <ProCard>
        <Statistic title="交易类型" value="定价出售" />
      </ProCard>
      <ProCard.Divider type={responsive ? 'horizontal' : 'vertical'} />
      <ProCard>
        <Statistic title="价格" value={sale?.price} />
      </ProCard>
      <ProCard.Divider type={responsive ? 'horizontal' : 'vertical'} />
      <ProCard>
        <Statistic
          title="指定账户地址"
          value={
            sale?.buyer &&
            sale.buyer !== '0x0000000000000000000000000000000000000000'
              ? sale.buyer
              : '-'
          }
        />
      </ProCard>
    </ProCard.Group>
  );
};

export default SaleCard;
